<template>
  <div>
    <div class="sole"></div>
    <div class="zhuda-a">
      <span class="benzhou">本周主打</span>
      <span class="gengduo">查看更多 > </span>
    </div>
    <div class="wrapper-a">
      <div class="wrapper-b" v-for="item of swiperList" :key="item.id">
        <div class="item">
          <img :src="item.imgUrl">
          <div class="txta">
            <span class="title">{{item.title}}</span>
            <span class="num">{{item.num}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BooksThisweek',

  data() {
    return {
      swiperList: [
        {
          id: '001',
          title: '蜜汁炖鱿鱼',
          num: 'NO.1',
          imgUrl: require('../assets/images/zhuda-a.jpg')
        },
        {
          id: '002',
          title: '蜜汁炖鱿鱼',
          num: 'NO.2',
          imgUrl: require('../assets/images/zhuda-b.jpg')
        },
        {
          id: '003',
          title: '蜜汁炖鱿鱼',
          num: 'NO.3',
          imgUrl: require('../assets/images/zhuda-c.jpg')
        },
        {
          id: '004',
          title: '蜜汁炖鱿鱼',
          num: 'NO.4',
          imgUrl: require('../assets/images/zhuda-d.jpg')
        },
      ]
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style scoped>
.zhuda-a {
    padding: 15px 10px 5px ;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .benzhou {
    color: #000;
    font-size: 20px;
  }

  .gengduo {
    color: rgb(119, 113, 113);
    font-size: 14px;
  }

  .wrapper-a {
    display: flex;
    justify-content: space-between;
    overflow:auto;
    padding:0 0 25px
  }

   .wrapper-b .item img {
     width: 115px;
     height: 90px;
   }

   .wrapper-b .item {
     padding: 0 5px;
   }

   .wrapper-b .item .title {
     font-size: 14px;
    font-weight:bold
   }

   .wrapper-b .item .num {
     font-size: 12px;
     color: rgb(235, 143, 22);
   }

   .txta {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
   }

   .sole {
     width: 100%;
     height: 15px;
     background-color: rgb(245, 245, 245);
     margin-top: 15px;
   }

</style>